<template>
  <div>
    <div class="top-tool-bar">
      <el-input
        v-model="searchTeacherName"
        placeholder="输入教员名称"
        @keydown.native.enter="handleConfirmSearchTeacher"
      ></el-input>
      <el-input
        v-model="searchCourseName"
        placeholder="输入课程名称"
        @keydown.native.enter="handleConfirmSearchCourseName"
      ></el-input>
      <el-button @click="reset" type="primary">重置</el-button>
    </div>
    <common-table
      :table="table"
      :tableData="tableDataShow"
      :formTemplate="formTemplate"
    >
      <el-table-column label="读权限" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isReadable" disabled> </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="写权限" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isWritable" disabled> </el-switch>
        </template>
      </el-table-column>

      <!-- <el-table-column label="黑名单" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column> -->
    </common-table>
    <!-- <el-dialog title="黑名单" :visible.sync="dialogVisible" width="50%">
      <el-row>
        <el-col :span="6" :offset="18"
          ><el-input
            @keydown.enter.native="searchInBlackList"
            v-model="blackListKeyWord"
            placeholder="搜索"
          ></el-input
        ></el-col>
      </el-row>
      分割线
      <el-divider></el-divider>
      黑名单人员
      <el-table :data="gridDataShow" height="250">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog> -->
  </div>
</template>

<script>
/**
 * 搜索的逻辑，优先搜索黑名单的人，然后没搜索到就展示黑名单没有，但是在所有里面发现了，然后可以添加到黑名单
 */
import CommonTable from "@/components/CommonTable.vue";

export default {
  name: "EvaluateManage",
  components: {
    CommonTable,
  },
  data() {
    return {
      // 展示的数据
      tableData: [
        {
          // evaluate_id: "52565946515",
          course_id: "",
          teacher_name: "002",
          course_name: "高等数学",
          isReadable: false,
          isWritable: true,
        },
      ],
      table: [
        // {
        //   label: "评价项ID",
        //   prop: "evaluate_id",
        // },
        {
          label: "教员名称",
          prop: "teacher_name",
        },
        {
          label: "课程名称",
          prop: "course_name",
        },
      ],
      formTemplate: [
        {
          type: "input",
          label: "教员名称",
          key: "teacher_name",
          disabled: true,
        },
        {
          type: "input",
          label: "课程名称",
          key: "course_name",
          disabled: true,
        },
        {
          type: "switch",
          label: "读权限",
          key: "isReadable",
        },
        {
          type: "switch",
          label: "写",
          key: "isWritable",
        },
      ],
      dialogVisible: false,
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "李小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙12江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      blackListKeyWord: "",
      searchTeacherName: "",
      searchCourseName: "",
      tableDataShow: [],
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogVisible = true;
    },
    searchInBlackList() {
      // 1.从本地搜索结果
      // 2.如果本地无结果，从云端搜索
      if (this.gridDataShow.length == 0) {
        // this.axios.get(`${this.$reqPrefix}/searchBlackList`).then((res) => {
        //   // this.xxx = res.data.data;
        // });
        //
      }
    },
    handleConfirmSearchTeacher() {
      console.log(this.searchTeacherName);
      this.tableDataShow = this.tableData.filter(
        (t) => t.teacher_name == this.searchTeacherName
      );
    },
    handleConfirmSearchCourseName() {
      this.tableDataShow = this.tableDataShow.filter(
        (t) => t.course_name == this.searchCourseName
      );
    },
    reset() {
      this.tableDataShow = this.tableData;
      this.searchCourseName = "";
      this.searchTeacherName = "";
    },
  },

  computed: {
    gridDataShow() {
      if (this.blackListKeyWord.length === 0) {
        return this.gridData;
      } else {
        return this.gridData.filter((e) =>
          e.name.includes(this.blackListKeyWord)
        );
      }
    },
  },
  mounted() {
    this.tableDataShow = this.tableData;
  },
};
</script>

<style scoped>
.top-tool-bar {
  width: 500px;
  display: flex;
}
</style>